<template>
	<view class="user">
		<view class="header-bg">
			<custom-navbar :statusBarHeight="statusBarHeight" :navBarHeight="navBarHeight" :windowWidth="windowWidth"
				:color="color" :backgroundColor="backgroundColor" :iconShow="false"></custom-navbar>
			<!-- 需要添加占位符高度  状态栏高度+导航栏高度（否则下面tab会塌陷）-->
			<view :style="{height: statusBarHeight+navBarHeight+'px'}"></view>
		</view>
		<view class="comlum_box">
			<subscriber :userQuery="query">
				<view class="right_comlumn">
					<view class="cutbtn" @click="routeManager" v-if="query.is_store">
						<view class="btn-content">
							<image :src="$IMG_URL('/static/newVersion/cut.png')" mode="aspectFit" class="cut"></image>
							<text class="btn-text">我是店长</text>
						</view>
						<view class="btn-glow"></view>
					</view>
					<view class="cutbtn mt" @click="routeStock" v-if="query.is_stock">
						<view class="btn-content">
							<image :src="$IMG_URL('/static/newVersion/cut.png')" mode="aspectFit" class="cut"></image>
							<text class="btn-text">我是股东</text>
						</view>
						<view class="btn-glow"></view>
					</view>
				</view>
			</subscriber>
			<membershipCard :userQuery="query.card_info" v-if="query.card_info"></membershipCard>
			<image :src="query.invite_image" mode="" class="reward" v-if="query.is_invite" @click="routefriend"></image>
			<view class="card_box" v-if="tokenShow">
				<view class="center_box" :style="{height:!audit?'320rpx':'170rpx'}">
					<view class="top_box">
						<view class="tag_box" @click="$ROUTELINK('/pageB/user/cardBag')">
							<image :src="$IMG_URL('/static/newVersion/card1.png')" mode="" class="logo_box"></image>
							<view class="size">
								卡包
							</view>
						</view>
						<view class="tag_box" @click="$ROUTELINK('/pageB/user/course')">
							<image :src="$IMG_URL('/static/newVersion/card2.png')" mode="" class="logo_box"></image>
							<view class="size">
								课程
							</view>
						</view>
						<view class="tag_box" @click="$ROUTELINK('/pageB/user/coupon')">
							<image :src="$IMG_URL('/static/newVersion/card3.png')" mode="" class="logo_box"></image>
							<view class="size">
								优惠券
							</view>
						</view>
						<view class="tag_box" @click="$ROUTELINK('/pageB/user/order/index')">
							<image :src="$IMG_URL('/static/newVersion/card4.png')" mode="" class="logo_box"></image>
							<view class="size">
								订单
							</view>
						</view>
						<view class="tag_box" @click="$ROUTELINK('/pageB/user/CDKEY1')">
							<image :src="$IMG_URL('/static/loading/conversion.png')" mode="" class="logo_box"></image>
							<view class="size">
								兑换码
							</view>
						</view>
					</view>
					<view class="bottom_box" v-if="!audit">
						<view class="btn" @click="$ROUTELINK('/pageB/user/Face_record')">
							<image :src="$IMG_URL('/static/user/Camera.png')" mode="" class="Camera"></image>
							<view class="size">
								门禁扫脸采集
							</view>
						</view>

						<view class="btn" @click="shaoMaopen(query.is_coach)">
							<image :src="$IMG_URL('/static/member/scan.png')" mode="" class="User"></image>
							<view class="size">
								扫码开门
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="footbox">
				<!-- <view class="row" @click.stop="routeTest">
					<image :src="$IMG_URL('/static/test/history.png')"  mode="" class="tag3"></image>
					<view class="size">
						体测记录
					</view>
					<u-icon name="arrow-right" color="#CCCCCC" size="14"></u-icon>
				</view> -->
				<view class="row" @click="changeCoach(query.is_coach)">
					<image :src="$IMG_URL('/static/member/person.png')" mode="" class="tag3"></image>
					<view class="size">
						{{!query.is_coach?'成为教练':'我是教练'}}
					</view>
					<u-icon name="arrow-right" color="#CCCCCC" size="14"></u-icon>
				</view>
				<view class="row" @click.stop="routeProblam">
					<image :src="$IMG_URL('/static/user/usertag1.png')" mode="" class="tag1"></image>
					<view class="size">
						常见问题
					</view>
					<u-icon name="arrow-right" color="#CCCCCC" size="14"></u-icon>
				</view>
				<button open-type="contact" hover-class="none" class="row">
					<image :src="$IMG_URL('/static/user/usertag2.png')" mode="" class="tag1"></image>
					<view class="size">
						联系客服
					</view>
					<u-icon name="arrow-right" color="#CCCCCC" size="14"></u-icon>
				</button>
				<view class="row" @click.stop="$ROUTELINK('/pageB/user/feedback')" v-if="tokenShow">
					<image :src="$IMG_URL('/static/user/usertag3.png')" mode="" class="tag1"></image>
					<view class="size">
						意见反馈
					</view>
					<u-icon name="arrow-right" color="#CCCCCC" size="14"></u-icon>
				</view>
				<view class="row" @click.stop="$ROUTELINK('/pageB/activity/join/newIndex')" v-if="tokenShow">
					<image :src="$IMG_URL('/static/user/usertag4.png')" mode="" class="tag1"></image>
					<view class="size">
						优机小羊合伙人招募中
					</view>
					<u-icon name="arrow-right" color="#CCCCCC" size="14"></u-icon>
				</view>
				<view class="row" @click="$ROUTELINK('/pageB/user/setting')" v-if="tokenShow">
					<image :src="$IMG_URL('/static/user/usertag5.png')" mode="" class="tag1"></image>
					<view class="size">
						设置
					</view>
					<u-icon name="arrow-right" color="#CCCCCC" size="14"></u-icon>
				</view>
			</view>
			<BrandLogo></BrandLogo>
		</view>
	</view>
</template>

<script>
	import subscriber from './components/subscriber.vue';
	import CustomNavbar from '@/components/navbar/navbar.vue';
	import membershipCard from './components/membership-card.vue';
	import BrandLogo from '../index/components/Brand_logo.vue'
	import {
		versions
	} from '@/api/common.js'
	export default {
		props: {
			query: {
				type: Object,
				default: {},
				required: true
			},
			rewardShow: {
				type: Boolean,
				default: false,
				required: true
			},
			tokenShow: {
				type: Boolean,
				default: false,
				required: true
			}
		},
		components: {
			subscriber,
			CustomNavbar,
			membershipCard,
			BrandLogo
		},
		data() {
			return {
				// 自定义导航栏
				color: '#ffffff',
				backgroundColor: 'transparent',
				pageTitle: '',
				statusBarHeight: 20,
				navBarHeight: 45,
				windowWidth: 375,
				audit: 0
			}
		},
		created() {
			this.getVersions()
			// 获取手机系统信息
			const info = uni.getDeviceInfo()
			console.log('info', info);
			// 设置状态栏高度（H5顶部无状态栏小程序有状态栏需要撑起高度）
			this.statusBarHeight = info.statusBarHeight
			this.windowWidth = info.windowWidth
			// 除了h5 app mp-alipay的情况下执行
			// #ifndef H5 || APP-PLUS || MP-ALIPAY
			// 获取胶囊的位置
			const menuButtonInfo = uni.getMenuButtonBoundingClientRect()
			console.log(menuButtonInfo);
			// (胶囊底部高度 - 状态栏的高度) + (胶囊顶部高度 - 状态栏内的高度) = 导航栏的高度
			this.navBarHeight = (menuButtonInfo.bottom - info.statusBarHeight) + (menuButtonInfo.top - info
				.statusBarHeight)
			this.windowWidth = menuButtonInfo.left
			// #endif
		},
		methods: {
			getVersions() {
				versions().then(({
					data: res
				}) => {
					console.log('res人脸', res);
					if (res.code == 1) {
						this.audit = res.data.audit
					}
				})
			},
			routeTest() {
				uni.navigateTo({
					url: '/pageB/user/physical-fitness/index'
				})
			},
			getcontact() {
				uni.contactCustomerService({
					success(res) {
						console.log('已打开客服会话', res);
					},
					fail(err) {
						console.error('打开客服会话失败', err);
					}
				});
			},
			routefriend() {
				uni.navigateTo({
					url: '/pageB/user/invite/friend'
				})
			},
			changeCoach(data) {
				// this.$ROUTELINK('/pageB/user/become_coach/index')
				this.$emit('changeCoach', data)
			},
			routeManager() {
				// this.$emit('changeManager')
				wx.navigateToMiniProgram({
					appId: 'wx67fc819b596da037', // 必填，要跳转的目标小程序的appId
					path: 'pages/index/index', // 打开的页面路径，如果留空则打开首页
					extraData: { // 需要传递给目标小程序的数据，目标小程序可在 App.onLaunch 或者 App.onShow 中获取到这部分数据
					},
					envVersion: '', // 要打开的像是开发版（develop）、体验版（trial）还是正式版（release），若不填默认是正式版
					success(res) {
						// 调用成功的回调函数
						console.log('打开成功', res);
					},
					fail(err) {
						// 调用失败的回调函数
						console.log('打开失败', err);
					}
				});
			},
			routeStock() {
				// this.$emit('changeStock')
				wx.navigateToMiniProgram({
					appId: 'wxdc96c129808a1f41', // 必填，要跳转的目标小程序的appId
					path: 'pages/index/index', // 打开的页面路径，如果留空则打开首页
					extraData: { // 需要传递给目标小程序的数据，目标小程序可在 App.onLaunch 或者 App.onShow 中获取到这部分数据
					},
					envVersion: '', // 要打开的像是开发版（develop）、体验版（trial）还是正式版（release），若不填默认是正式版
					success(res) {
						// 调用成功的回调函数
						console.log('打开成功', res);
					},
					fail(err) {
						// 调用失败的回调函数
						console.log('打开失败', err);
					}
				});
			},

			// 扫码开门
			shaoMaopen(e) {
				uni.navigateTo({
					url: '/pageB/user/scanopen'
				})
			},
			routeProblam() {
				uni.navigateTo({
					url: '/pageB/user/problem'
				})
			}
		}
	}
</script>

<style lang="scss">
	.right_comlumn {
		display: flex;
		flex-direction: column;

		.mt {
			margin-top: 20rpx;
		}
	}

	button {
		margin: unset;
		padding: unset;
		background-color: transparent;
		/* 消除背景色 */
		border: none;
		/* 消除边框 */
	}

	button:after {
		border: unset;
	}

	button:active {
		background-color: transparent;
		/* 去除点击时的背景变化 */
	}

	page {
		background: #e9e9e9;
	}

	.user {
		display: flex;
		flex-direction: column;
		align-items: center;

		.header-bg {
			width: 750rpx;
			height: 550rpx;
			background: linear-gradient(180deg, #73F0EA, rgba(255, 255, 255, 0.00));
			display: flex;
			flex-direction: column;
		}

		.comlum_box {
			margin-top: -360rpx;
			width: 750rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
		}

		.reward {
			width: 686rpx;
			height: 230rpx;
			margin-top: 20rpx;
			border-radius: 40rpx;
		}

		.card_box {
			margin-top: 20rpx;
			width: 686rpx;
			// height: 320rpx;	
			background: #ffffff;
			border-radius: 32rpx;
			display: flex;
			align-items: center;
			justify-content: center;

			.center_box {
				width: 678rpx;
				// height: 312rpx;
				background: linear-gradient(180deg,
						rgba(129, 202, 197, 0.25),
						/* 将#73F0EA的透明度设置为0.25 */
						rgba(129, 202, 197, 0.145),
						/* 14%位置的颜色透明度根据原始0.58和全局0.25计算得出 */
						rgba(255, 255, 255, 0)
						/* 完全透明的白色保持不变 */
					);
				border-radius: 32rpx;
				display: flex;
				flex-direction: column;
				align-items: center;

				.top_box {
					display: flex;
					flex-direction: row;
					justify-content: space-around;
					width: 100%;
					height: 180rpx;
					padding: 12rpx 28rpx 0;

					.tag_box {
						display: flex;
						flex-direction: column;
						align-items: center;

						.logo_box {
							width: 88rpx;
							height: 88rpx;
							display: flex;
							align-items: center;
							justify-content: center;
							margin-bottom: 10rpx;
						}

						.size {
							font-size: 12px;
							font-family: PingFang SC, PingFang SC-Bold;
							font-weight: 700;
							text-align: center;
							color: #333333;
						}
					}
				}

				.bottom_box {
					display: flex;
					flex-direction: row;
					justify-content: space-around;
					width: 100%;
					padding: 0 14rpx 0;

					.btn {
						width: 304rpx;
						height: 112rpx;
						background: #f7f7f7;
						border: 1rpx solid #e9e9e9;
						border-radius: 32rpx;
						display: flex;
						flex-direction: row;
						justify-content: center;
						align-items: center;

						.Camera {
							width: 64rpx;
							height: 50rpx;
						}

						.User {
							width: 86rpx;
							height: 88rpx;
						}

						.size {
							margin-left: 33rpx;
							font-size: 28rpx;
							font-family: PingFang SC, PingFang SC-Bold;
							font-weight: 700;
							text-align: center;
							color: #333333;
						}
					}
				}
			}
		}

		.footbox {
			margin-top: 20rpx;
			width: 686rpx;
			background: #ffffff;
			border-radius: 32rpx;
			padding: 0 32rpx;

			.row {
				height: 102rpx;
				width: 100%;
				display: flex;
				flex-direction: row;
				align-items: center;
				padding: 0 14.5rpx;
				border-bottom: 2rpx solid #f8f8f8;

				.tag1 {
					width: 32rpx;
					height: 32rpx;
				}

				.tag2 {
					width: 32rpx;
					height: 32rpx;
				}

				.tag3 {
					width: 32rpx;
					height: 34rpx;
				}

				.tag4 {
					width: 26rpx;
					height: 32rpx;
				}

				.size {
					font-size: 28rpx;
					font-family: PingFang SC, PingFang SC-Bold;
					font-weight: 700;
					text-align: left;
					color: #333333;
					margin-left: 30rpx;
					flex: 1;
				}
			}
		}
	}

	.cutbtn {
		width: 95px;
		height: 36px;
		background: linear-gradient(135deg, #73F0EA 0%, #5ee8e1 100%);
		border: none;
		border-radius: 18px;
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		overflow: hidden;
		transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
		box-shadow:
			0 4rpx 15rpx rgba(115, 240, 234, 0.3),
			0 2rpx 8rpx rgba(115, 240, 234, 0.2);

		&:active {
			transform: scale(0.95);
			box-shadow:
				0 2rpx 8rpx rgba(115, 240, 234, 0.4),
				0 1rpx 4rpx rgba(115, 240, 234, 0.3);
		}

		.btn-content {
			display: flex;
			align-items: center;
			justify-content: center;
			position: relative;
			z-index: 2;

			.btn-text {
				font-size: 14px;
				font-family: PingFang SC, PingFang SC-Bold;
				font-weight: 600;
				color: #FFFFFF;
				margin-left: 6rpx;
				letter-spacing: 0.5px;
				text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.1);
			}
		}

		.btn-glow {
			position: absolute;
			top: 0;
			left: -100%;
			width: 100%;
			height: 100%;
			background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
			animation: shine 2s infinite;
			z-index: 1;
		}

		.cut {
			width: 16px;
			height: 14px;
			filter: brightness(0) invert(1);
			transition: transform 0.2s ease;
		}
	}

	// 添加发光动画
	@keyframes shine {
		0% {
			left: -100%;
		}

		100% {
			left: 100%;
		}
	}
</style>